<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">营养元素数据</div>
    </nav-bar>
    <!--    <div class="content" v-html="detail.content"></div>-->

    <div class="editor_box">
      <quill-editor
        v-model="detail.content"
        ref="myQuillEditor"
        :options="editorOption"
        @focus="onEditorFocus($event)"
        @blur="onEditorBlur($event)"
        @change="onEditorChange($event)">
      </quill-editor>
    </div>

<!--    <div class="add_btn" @click="onSave">-->
<!--      <van-button type="primary" color="#1692f2" block>保存</van-button>-->
<!--    </div>-->

  </div>
</template>

<script>
  // 工具栏配置
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['link', 'image']
  ];

  import Util from "@/common/util";
  import NavBar from "@/components/common/navbar/NavBar"
  import {quillEditor} from 'vue-quill-editor'

  export default {
    name: "elements",
    components: {
      NavBar,
      quillEditor
    },

    data() {
      return {
        id:'',
        base_id:'',
        pid: '',
        detail: {title:'', content:''},
        editor: null,   // 富文本编辑器对象
       // content: `<p>发反反复复反对方答复</p><p>123455665个发放给发个<br></p><ol></ol>`, // 富文本编辑器默认内容
        editorOption: { //  富文本编辑器配置
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
            }
          },
          theme: 'snow',
          placeholder: '请输入正文'
        },
      }
    },

    created() {
      this.base_id = Util.storage.get('base_id');
      this.pid = this.$route.query.pid;
      this.getContent();
    },

    mounted() {
      this.editor = this.$refs.myQuillEditor.quill;
    },

    beforeDestroy() {
      this.editor = null;
      delete this.editor;
    },

    methods: {

      // 准备富文本编辑器
      onEditorReady(editor) {
      },
// 富文本编辑器 失去焦点事件
      onEditorBlur(editor) {
      },
// 富文本编辑器 获得焦点事件
      onEditorFocus(editor) {
      },
// 富文本编辑器 内容改变事件
      onEditorChange(editor) {
        console.log(editor)
        this.detail.content = editor.html;
      },

      getContent() {
        let that = this;
        that.$http.get('/api/UserCheckApi/getNutrition', {pid: that.pid}, r => {
          console.log('获取营养元素：', r)
          this.detail = r.data;
          this.id = r.data.id;
        })
      },

      // onSave(){
      //   let that = this;
      //   let params = {
      //     id: that.id,
      //     base_id: that.base_id,
      //     pid:that.pid,
      //     content:this.detail.content
      //   }
      //   that.$http.post('/api/MobileAadminApi/addNutrition',params, r => {
      //     console.log('r',r)
      //     that.$toast.success('保存成功');
      //   })
      // },

      goBack() {
        this.$router.go(-1);
      },

    }
  }
</script>

<style scoped>
  .editor_box {
    background: #fff;
  }
  .add_btn >>> .van-button--normal{
    font-size: .36rem;
  }
</style>
